<template>
    <div class="user-container app-container page-industry-list">
      <div class="filter-container">
        <div>
          <el-input v-model="listQuery.mid_table_remark_004_like" placeholder="请输入帖子名称" clearable
            class="filter-item input-item" style="width: 200px" @clear="handleFilter" @keyup.enter.native="handleFilter" />
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
            搜索
          </el-button>
        </div>
      </div>
      <div class="page-content">
        <el-table :key="0" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
          <el-table-column label="用户ID" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.id_public_user_info }}</span>
            </template>
          </el-table-column>
          <el-table-column label="帖子标题" align="center" :resizable="false">
            <template slot-scope="{ row }">
              {{ row.mid_table_remark_004 }}
            </template>
          </el-table-column>
          <el-table-column label="帖子图片" align="center" width="180">
            <template slot-scope="{ row }">
              <el-image v-for="(img, index) in row.imgList" :key="index" :src="img" style="width: 60px; height: 60px;margin-right: 5px"></el-image>
            </template>
          </el-table-column>
          <!-- <el-table-column label="帖子正文" align="center" :resizable="false">
            <template slot-scope="{ row }">
              {{ row.mid_table_remark_003 }}
            </template>
          </el-table-column> -->
          <el-table-column label="话题标题" align="center">
            <template slot-scope="{ row }">
              {{ row.mid_table_remark_001 }}
            </template>
          </el-table-column>
          <el-table-column label="话题描述" align="center" :resizable="false">
            <template slot-scope="{ row }">
              {{ row.mid_table_remark_002 }}
            </template>
          </el-table-column>
          <el-table-column label="用户昵称" align="center">
            <template slot-scope="{ row }">
              {{ row.mid_table_remark_007 }}
            </template>
          </el-table-column>
          <el-table-column label="用户电话" align="center">
            <template slot-scope="{ row }">
              {{ row.mid_table_remark_008 }}
            </template>
          </el-table-column>
          <el-table-column label="用户头像" align="center">
            <template slot-scope="{ row }">
              <el-avatar :size="50" :src="row.mid_table_remark_009"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" align="center">
            <template slot-scope="{ row }">
              {{ row.mid_table_remark_040 }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width" :resizable="false">
            <template slot-scope="{ row }">
              <!-- <span ype="text" size="mini" @click="onEditOrAdd(row)" class="table-btn">
                编辑
              </span> -->
              <span ype="text" size="mini" @click="handleDetails(row)" class="table-btn">
                详情
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <pagination v-show="total > 0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit"
        @pagination="getPageList" />

      <editPost ref="refNewModify" @refresh="onRefresh"></editPost>
    </div>
  </template>
  
  <script>
  import waves from "@/directive/waves"; // waves directive
  import Pagination from "@/components/Pagination";
  import { middleList } from "@/api/middle";
  import editPost from "./components/editPost.vue";

  export default {
    name: "Post",
    directives: { waves },
    components: {
      Pagination,
      editPost,
    },
    data() {
      return {
        listQuery: {
          mid_table_remark_004_like: null,
          invoke_method: "public_load_middle_table_list",
          pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
          type_middle_app: 62001,
          type_inner_app: 1001,
          is_online: 0,
          pre_db_para_begin_idx: 0,
          pre_db_para_length_4_list: 10,
        },
        listLoading: false,
        list: [],
        total: 1,
        currentPage: 1,
      };
    },
    mounted() {
      this.getList();
    },
    methods: {
      /*
       * 获取页面数据
       * */
      getList() {
        this.listLoading = true;
        middleList(this.Qs.stringify(this.listQuery)).then((response) => {
          this.listLoading = false;
          this.list = response.page_content;
          for(let i in this.list) {
            this.list[i].imgList = this.list[i].mid_table_remark_005.split('-_-')
          }
          this.total = response.result_num;
        }).catch(err => {
          this.listLoading = false;
        });
      },
      /*
       * 查询数据
       * */
      handleFilter() {
        this.listQuery.pre_db_para_begin_idx = 0;
        this.getList();
      },
      /*
       * 点击分页进行查询
       * */
      getPageList(val) {
        this.listQuery.pre_db_para_begin_idx = (val.page - 1) * this.listQuery.pre_db_para_length_4_list;
        this.getList();
      },
      // 新增/编辑数据
      onEditOrAdd(row) {
        this.$refs.refNewModify.onEditOrAdd(row);
      },
      handleDetails(item) {
        this.$router.push({
            path: "/postDetails",
            query: { id: item.id_public_middle_table },
        });
      },
      // 刷新页面数据
      onRefresh() {
        this.getList();
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  @import "../../styles/common.scss";
  .page-industry-list {
    .filter-container {
      display: flex;
      display: -webkit-flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  
  
  }
  </style>
  